<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios的get请求</title>
    <!--1.引入外部的vue.js文件-->
    <script src="./js/vue@3.5.12.global.js"></script>
    <script src="./js/axios.js"></script>
</head>
<body>
<!--2.视图-->
    <div id="app">
        <!--如果函数不需要传参，可以不写小括号-->
        <button @click="getUsers">使用get请求从远程获取数据</button>
        <table width="100%" border="1">
            <tr v-for="(user,index) in users" :key="index">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.email}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    //3.创建Vue实例
    const app = Vue.createApp({
        //model:放数据的地方
        data(){
            return {
                users:[]// 空的用户数组
            }
        },
        methods:{
            //获取数据的函数
            getUsers(){
                //发送get请求
                axios.get('https://jsonplaceholder.typicode.com/users') //url
                    .then(resp=>{
                        //执行成功
                        console.log(resp)
                        //为数组属性赋值
                        this.users = resp.data;
                        console.log('用户数组：',this.users)
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            }
        },
        //获取数据
        mounted(){ //生命周期钩子函数，在页面加载时，就会执行this.user就有值了。
            this.getUsers();
        }
    })
    //4.挂载:将数据渲染到指定的视图位置
    app.mount('#app');
</script>
</html>